<template>
  <div class="subpage">
        <div class="purchase-order-detail-container" v-if="orderDetail">
            <div class="project-info">
                <div class="project-info-top">
                    <p class="project-num">订单编号：{{orderDetail.outTradeNo}}</p>
                    <div class="project-item-info">
                        <div class="project-img">
                            <img :src="orderDetail.orderProductVo.smallPic" alt="">
                        </div>
                        <ul class="project-item-detail">
                            <li>
                                <p class="project-name">{{orderDetail.orderProductVo.productName}}({{orderDetail.orderProductVo.farmName}})</p>
                            </li>
                            <li>
                                <span>养殖地：{{orderDetail.orderProductVo.originProvince}}</span>
                                <span>牧场：{{orderDetail.orderProductVo.farmName}}</span>
                            </li>
                            <li>
                                <span>重量：{{orderDetail.orderProductVo.productWeight}}{{orderDetail.orderProductVo.productWeightUnit}}</span>
                                <span>单价：{{orderDetail.orderProductVo.salesPrice}}{{orderDetail.orderProductVo.salesPriceUnit}}</span>
                            </li>
                            <li>
                                <p class="project-price">
                                    <span>{{orderDetail.orderProductVo.totalPrice}}</span>{{orderDetail.orderProductVo.totalPriceUnit}}
                                </p>
                            </li>
                            <li>
                                <p class="project-status" v-if="orderDetail.state == 1">剩余交货期：<span class="color-primary">{{orderDetail.orderProductVo.deliveryMonth}}</span>{{orderDetail.orderProductVo.timeType}}</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <ul class="project-info-bottom">
                    <li>
                        <p class="project-tag-name">购买数量</p>
                        <p class="project-tag-info">{{orderDetail.orderProductVo.quantity}}头</p>
                    </li>
                    <li>
                        <p class="project-tag-name">总重量</p>
                        <p class="project-tag-info">{{orderDetail.orderProductVo.productTotalWeight}}kg</p>
                    </li>
                    <li>
                        <p class="project-tag-name">总金额</p>
                        <p class="project-tag-info color-primary">{{orderDetail.orderProductVo.orderMoney}}元</p>
                    </li>
                    <li>
                        <p class="project-tag-name">配送方式</p>
                        <p class="project-tag-info">{{orderDetail.orderProductVo.shipment}}</p>
                    </li>
                    <li>
                        <p class="project-tag-name">物流费用</p>
                        <p class="project-tag-info color-primary">{{orderDetail.orderProductVo.expressFee}}元</p>
                    </li>
                    <li>
                        <p class="project-tag-name">配送时间</p>
                        <p class="project-tag-info delivery-date">
                            <span>{{orderDetail.orderProductVo.expressTime}}</span>
                            <img src="../../../assets/img/delivery_date_info.png" alt="" @click="showTimeTips">
                        </p>
                    </li>
                    <li class="project-pay-info">
                        <p class="project-tag-name">实付金额</p>
                        <p class="project-tag-info">
                            合计：<span class="color-primary">{{orderDetail.orderProductVo.payMoney}}元</span>
                        </p>
                    </li>
                </ul>
            </div>

            <div class="resale-status-box">
                <div class="product-info">
                    <div class="product-info-left">
                        <span>耳标ID</span>
                    </div>
                    <div class="product-info-right" @click="jumpEarItem(orderDetail.id)">
                        <span>详情</span>
                        <img src="../../../assets/img/home_img19.png" alt="">
                    </div>
                </div>
                <div class="project-title" @click="jumpResale(orderDetail.resaleId)" v-if="showResale">
                    <p>转售记录</p>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
                <div class="resal-status-text" v-if="showResale">
                    <span>已转售：{{orderDetail.orderSellVo.sellOutNum}}头</span>
                    <span>转售中：{{orderDetail.orderSellVo.sellingNum}}头</span>
                    <span>剩余数量：{{orderDetail.orderSellVo.savesNum}}头</span>
                </div>
            </div>

            <div class="send-delivery-box">
                <van-collapse v-model="activeNames">
                    <!-- <van-collapse-item size="large" title="发货详情" name="1" class="send-goods-box">
                        <ul class="send-goods-detail">
                            <li>
                                <span>数量</span>
                                <span>1头</span>
                            </li>
                            <li>
                                <span>总重量</span>
                                <span>650斤</span>
                            </li>
                            <li>
                                <span>配送方式</span>
                                <span>冷链配送</span>
                            </li>
                            <li>
                                <span>包装方式</span>
                                <span>真空 冷冻 箱装</span>
                            </li>
                        </ul>
                        <div class="send-goods-tips">
                            <p>*每头牛最终向用户交付325kg牛胴体*</p>
                            <img src="@/assets/img/home_img12.png" alt="" class="meat-tips" @click="meatTips">
                        </div>
                    </van-collapse-item> -->

                    <van-collapse-item size="large" title="收货地址" name="2" class="delivery-box">
                        <div class="delivery-address-box">
                            <div class="address-detail">
                                <img src="../../../assets/img/delivery_location_icon.png" alt="">
                                <div class="address-detail-text">
                                    <p><span>{{orderDetail.orderAddressVo.addressName}}</span>{{orderDetail.orderAddressVo.addressPhone}}</p>
                                    <p>{{orderDetail.orderAddressVo.addressProvince}} {{orderDetail.orderAddressVo.addressCity}} {{orderDetail.orderAddressVo.addressDetail}}</p>
                                </div>
                            </div>
                            <div v-if="orderDetail.state != 3">
                                <div class="delivery-status" @click="changeAddress(orderDetail.id)" v-if="orderDetail.state != 99 && expressInfo.length <= 0">
                                    <p class="color-gray">修改地址</p>
                                    <van-icon name="arrow" class="arrow-right" />
                                </div>
                                <div class="delivery-status" v-else>
                                    <p class="color-primary">物流已发货</p>
                                </div>
                            </div>
                        </div>
                        <div class="logistics-step" v-if="expressInfo.length > 0">
                            <van-steps direction="vertical" :active="0" active-color="#31BC8D">
                                <van-step v-for="(item, index) in expressInfo" :key="index">
                                    <h3>{{item.AcceptStation}}</h3>
                                    <p>{{item.AcceptTime}}</p>
                                </van-step>
                            </van-steps>
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>

            <div class="order-info-detail" v-if="showResale">
                <div class="order-info-detail-title">订单信息</div>
                <ul class="order-info-detail-list">
                    <li>
                        <span>购买数量</span>
                        <span>{{orderDetail.orderProductVo.quantity}}头</span>
                    </li>
                    <li>
                        <span>订单金额</span>
                        <span>{{orderDetail.orderProductVo.orderMoney}}元</span>
                    </li>
                    <li>
                        <span>优惠金额</span>
                        <span>{{orderDetail.discountMoney}}元</span>
                    </li>
                    <li>
                        <span>支付金额</span>
                        <span>{{orderDetail.orderProductVo.payMoney}}元</span>
                    </li>
                    <li>
                        <span>支付方式</span>
                        <span>{{orderDetail.payMethod}}</span>
                    </li>
                    <li>
                        <span>合同编号</span>
                        <span>{{orderDetail.contractCode}}</span>
                    </li>
                    <li>
                        <span>支付时间</span>
                        <span>{{orderDetail.payTime}}</span>
                    </li>
                    <li>
                        <span>订单编号</span>
                        <span>{{orderDetail.outTradeNo}}</span>
                    </li>
                </ul>
            </div>

            <div class="serve-agreement-box" @click="goServiceAgreement(orderDetail.contractId, orderDetail.orderCategory)" v-if="showResale">
                <div class="serve-agreement-box-title">
                    <img src="../../../assets/img/contract_icon.png" alt="">
                    <span>友牧农场服务协议</span>
                </div>
                <van-icon name="arrow" class="arrow-right" />
            </div>

            <div class="order-pay-box" v-if="orderDetail.state == 0">
                <div class="order-pay-title">支付方式</div>
                <ul class="order-pay-type">
                    <li @click="choosePayType(1)">
                        <div class="order-pay-info">
                            <img src="../../../assets/img/home_img29.png" alt="">
                            <div class="order-pay-info-text">
                                <p>余额支付</p>
                                <p class="balance-money">{{accountMoney}}元</p>
                            </div>
                        </div>
                        <van-icon name="checked" class="check-icon color-primary" v-if="payType == 1" />
                        <van-icon name="circle" class="check-icon color-gray" v-else />
                    </li>
                    <li @click="choosePayType(2)">
                        <div class="order-pay-info">
                            <img src="../../../assets/img/wechart.png" alt="">
                            <div class="order-pay-info-text">
                                <p>微信支付</p>
                            </div>
                        </div>
                        <van-icon name="checked" class="check-icon color-primary" v-if="payType == 2" />
                        <van-icon name="circle" class="check-icon color-gray" v-else />
                    </li>
                </ul>
            </div>

            <div class="buy-agreement-box" @click="agreenmentFn" v-if="orderDetail.state == 0">
                <van-icon name="checked" class="color-primary checked-icon" v-if="agreenment" />
                <van-icon name="circle" class="color-gray checked-icon" v-else />
                <p>阅读且同意<span class="color-primary" @click.stop="goServiceAgreement(orderDetail.contractId, orderDetail.orderCategory)">《友牧农场服务协议》</span></p>
            </div>
        </div>

        <div class="buy-detail-bottom" v-if="orderDetail.state == 0">
            <div class="buy-detail-bottom-left">
                <span>共{{orderDetail.orderProductVo.quantity}}头</span>
                <span>合计：{{orderDetail.orderProductVo.payMoney}}元</span>
            </div>
            <!-- <van-button round class="u-btn-default u-bg-gray sure-btn">已完成</van-button> -->
            <van-button round class="u-btn-default u-bg-gradient-light buy-btn" @click="buyFn">确定购买</van-button>
        </div>

        <div class="bottom-info" v-else>
            <a :href="'tel:' + cusumerTel" class="bottom-info-left">
                <van-icon name="phone-o" class="phone-icon" />
                <span>咨询电话</span>
            </a>
            <van-button round class="u-btn-default u-bg-gray state-btn" v-if="orderDetail.state == 1 && orderDetail.orderProductVo.deliveryMonth > 0">养殖中</van-button>
            <van-button round class="u-btn-default u-bg-gray state-btn" v-if="orderDetail.state == 1 && orderDetail.orderProductVo.deliveryMonth == 0">待发货</van-button>
            <van-button round class="u-btn-default u-bg-gray state-btn" v-if="orderDetail.state == 2">待发货</van-button>
            <van-button round class="u-btn-default u-bg-gradient-light state-btn" v-if="orderDetail.state == 9" @click="sureGoods">确认收货</van-button>
            <van-button round class="u-btn-default u-bg-gray state-btn" v-if="orderDetail.state == 3">已完成</van-button>
            <van-button round class="u-btn-default u-bg-gray state-btn" v-if="orderDetail.state == 4">已转售</van-button>
            <van-button round class="u-btn-default u-bg-gray state-btn" v-if="orderDetail.state == 99">已失效</van-button>
        </div>

        <div class="meat-alert-container" v-if="meatTipsFlag">
			<div class="meat-alert-box">
				<div class="meat-alert-box-top">牛胴体</div>
				<div class="meat-alert-box-center">
					<p>{{orderDetail.orderProductVo.productDescriptionIntro}}</p>
					<p>{{orderDetail.orderProductVo.productDescriptionDetail}}</p>
				</div>
				<div class="color-primary meat-alert-box-bottom" @click="meatTipsFlag = false">知道啦</div>
			</div>
		</div>

        <div class="pay-pwd-box" v-if="balancePay">
            <div class="pay-pwd-content">
                <div class="pay-pwd-titel">
                    输入交易密码
                    <van-icon name="cross" class="close-pay-icon" @click="closePayBox" />
                </div>
                <div class="pay-pwd-center">
                    <van-password-input
                        :value="payPwd"
                        :focused="showKeyboard"
                        @focus="showKeyboard = true"
                    />
                </div>
                <van-button round class="u-btn-default u-bg-gradient-light sure-pwd-btn" @click="sureBuy">确认</van-button>
            </div>
        </div>

        <van-number-keyboard
            :value="payPwd"
            :show="balancePay"
            @input="onInput"
            @delete="onDelete"
        />
  </div>
</template>

<script>
import { Collapse, CollapseItem, Step, Steps, Dialog, PasswordInput, NumberKeyboard } from 'vant';
import Storage from "@/utils/storage";
// const WX = window.jWeixin || require('weixin-js-sdk')
export default {
    components:{
        [Collapse.name]:Collapse,
        [CollapseItem.name]:CollapseItem,
        [Step.name]:Step,
        [Steps.name]:Steps,
        [Dialog.name]:Dialog,
        [PasswordInput.name]:PasswordInput,
        [NumberKeyboard.name]:NumberKeyboard
    },
    data() {
        return {
            orderDetail: {
                orderProductVo: {
                    smallPic : ''
                },
                orderSellVo: {
                    orderSellVo: 0
                },
                orderAddressVo: {
                    addressName: ''
                },
                state: 1
            },
            activeNames: ['1', '2'],
            cusumerTel: '',
            meatTipsFlag: false,
            payType: 1, //余额支付
            balancePay: false,
            agreenment: false, //协议状态
            showResale: false, //转售记录显示状态
            accountMoney: 0, //钱包余额
            payPwd: '',
            showKeyboard: false,
            expressInfo: []
        };
    },
    created() {
        if(Storage.get('isOrderEditAddress')){
            Storage.del('isOrderEditAddress')
            this.getUserInfo()
            this.getOrderDetail()
        }else{
            this.getUserInfo()
            this.getOrderDetail()
        }
    },
    methods: {
        jumpResale(id) { //转售详情
            this.$router.push({
                path: '/my/resale/resaledetail/' + id
            })
        },

        jumpEarItem(id) { //耳标ID
            this.$router.push({
                path: '/home/earid/' + id + '/2'
            })
        },

        onInput(key) {
            console.log('key:', key)
            this.payPwd = (this.payPwd + key).slice(0, 6);
        },
        
        onDelete() {
            this.payPwd = this.payPwd.slice(0, this.payPwd.length - 1);
        },

        getUserInfo() { //获取用户钱包余额
            this.$api.get('/api/user/detail?noLoading')
                .then((res) => {
                    this.accountMoney = res.data.accountMoney;
                    this.$store.commit("setUserInfo", res.data);
                })
        },

        getOrderDetail() { //获取数据
            this.$api.get('/api/order/user_detail/' + this.$route.params.orderId)
                .then((res) => {
                    // res.data.state = 0
                    if(res.data.payTime) {
                        if(res.data.payTime.indexOf('T') != -1) {
                            res.data.payTime = res.data.payTime.replace('T', ' ')
                        }
                    }else {
                        res.data.payTime = ''
                    }
                    if(res.data.state == 0 || res.data.state == 99){
                        this.showResale = false;
                    }else{
                        this.showResale = true;
                    }
                    this.orderDetail = res.data;
                })
                .then(() => {
                    this.getExpressInfo()
                })
            this.$api.get('/api/index/consumer_tel?noLoading')
                .then((res) => {
                    this.cusumerTel = res.data.cusumerTel;
                })
        },

        getExpressInfo() { //获取物流信息
            this.$api.get('/api/cattle/exp/' + this.$route.params.orderId + '?noLoading')
                .then((res) => {
                    let infoData = JSON.parse(res.data)
                    if(infoData.Traces.length > 0){
                        infoData.Traces.reverse();
                    }

                    this.expressInfo = infoData.Traces;
                })
        },

        sureGoods() { //确认收货
            let params = {
                orderId: this.$route.params.orderId
            }
            this.$api.post('/api/order/confirmReceipt', params)
                .then((res) => {
                    this.$tool.toast('收货成功')
                    setTimeout(() => {
                        this.getOrderDetail()
                    }, 800)
                })
        },

        showTimeTips() { //展示信息
            this.$tool.toast('预计配送时间：养殖完成后的15个工作日内，完成屠宰加工后以冷链物流形式发货。', 3000)
        },

        goServiceAgreement(id, category) { //服务协议
            let viewName = category == 1 ? 'purchaseAgreement' : 'supplyAgreement';
            this.$router.push({
                name: viewName,
                query: {
                    id: id ? id : -1
                }
            })
        },

        changeAddress(orderDetailId) { //修改地址
            Storage.set('isOrderEditAddress', true)
            this.$router.push({
                path: '/home/addresslist/1',
                query: {
                    from: 'purchaseOrderDetail',
                    orderId: this.$route.params.orderId,
                    orderDetailId: orderDetailId
                }
            })
        },

        meatTips() { //出肉率提示
            this.meatTipsFlag = true;
        },

        choosePayType(type) { //选择支付方式
            this.payType = type;
            this.balancePay = type == 1 ? true : false;
        },

        agreenmentFn() { //阅读协议
            this.agreenment = !this.agreenment;
        },

        closePayBox() { //关闭密码输入窗口
            this.balancePay = false;
        },

        sureBuy() { //确认余额支付
            if(this.accountMoney < this.orderDetail.orderProductVo.payMoney){
                this.$tool.toast('钱包余额不足，请更改支付方式')
                return;
            }
            if(!this.$tool.validator.isEmpty(this.payPwd)){
                this.$tool.toast('请输入交易密码')
                return;
            }
            let regexCode = /\d{6}/;
            if(!regexCode.test(this.payPwd)){
                this.$tool.toast('请输入6位数字密码')
                return;
            }

            this.sureBuyAjax()
        },

        sureBuyAjax() {
            let postData = {
                payPwd: this.$md5(this.payPwd)
            }
            this.$api.post('/api/order/over_pay/' + this.$route.params.orderId, postData)
                .then((res) => {
                    if(res.code == 0){
                        this.payPwd = '';
                        this.balancePay = false;
                        this.$tool.toast('支付成功', 800)
                        setTimeout(() => {
                            this.getUserInfo()
                            this.getOrderDetail()
                        }, 1000);
                    }else if(res.data.code == 20014){   //交易密码错误
                        this.payPwd = '';
                        this.$tool.toast(res.data.message)
                    }
                })
        },

        buyFn() { //购买
            if(!this.agreenment){
                this.$tool.toast('请阅读且同意友牧农场供货协议')
                return;
            }
            if(this.payType == 1){
                this.balancePay = true;
                this.showKeyboard = true;
            }else{
                this.buyAjax()
            }
        },

        buyAjax() { //购买请求
            console.log('购买',WX)
            this.$api.post('/api/order/wx_pay/' + this.$route.params.orderId)
                .then((res) => {
                    this.wexinPay(JSON.parse(res.data));
                    // this.weixinPay(res.data);
                })
        },

        weixinPay(data) {
            let payData = {
                "appId": data.appId,
                "timeStamp": data.timeStamp,
                "nonceStr": data.nonceStr,
                "package": data.package,
                "signType": data.signType,
                "paySign": data.paySign
            }
            WeixinJSBridge.invoke('getBrandWCPayRequest', payData,
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        this.$tool.toast('支付成功', 800)
                        setTimeout(() => {
                            location.reload()
                        }, 1000);
                        // Dialog.alert({
                        //     message: '支付成功'
                        // }).then(() => {
                        //     location.reload()
                        // });
                    }
                })
        },

        wexinPay(data) {
            let appId = data.appId;
            let timestamp = data.timeStamp;
            let nonceStr = data.nonceStr;
            let signature = data.sign;
            let packages = data.package;
            let paySign = data.paySign;
            let signType = data.signType;

            WX.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: appId, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: nonceStr, // 必填，生成签名的随机串
                signature: signature, // 必填，签名，见附录1
                jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });

            WX.ready(function () {
                WX.chooseWXPay({
                    timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
                    package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                    signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: paySign, // 支付签名
                    success: function (res) {
                        // 支付成功后的回调函数
                        let msg = JSON.stringify(res)
                        alert('支付成功')
                        alert(msg)
                        setTimeout(() => {
                            this.getUserInfo()
                            this.getOrderDetail()
                        }, 1000);
                        // Dialog.alert({
                        //     message: msg
                        // }).then(() => {
                        //     location.reload()
                        // });
                    },
                    fail: function (res) {
                        //失败回调函数
                        let msg = JSON.stringify(res)
                        alert('支付失败')
                        alert(msg)
                        setTimeout(() => {
                            this.getUserInfo()
                            this.getOrderDetail()
                        }, 1000);
                        // Dialog.alert({
                        //     message: msg
                        // }).then(() => {
                        //     location.reload()
                        // });
                    }
                });
            });
            WX.error(function (res) {
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                this.$tool.toast('config信息验证失败')
            });
        }
    }
}
</script>

<style>
    .send-delivery-box .van-cell .van-cell__right-icon {
        color: #cdcdcd;
        font-size: 20px;
    }
    .send-delivery-box .van-cell .van-cell:not(:last-child)::after {
        left: 0;
    }
</style>

<style lang="scss" scoped>
    .purchase-order-detail-container {
        width: 100%;
        height: calc(100% - 63px);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .project-info {
            width: 100%;
            margin-bottom: 10px;
            .project-info-top {
                width: 100%;
                margin-bottom: 10px;
                padding: 16px;
                box-sizing: border-box;
                background-color: #fff;
                .project-num {
                    margin-bottom: 16px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #344047;
                }
                .project-item-info {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .project-img {
                        width: 80px;
                        height: 80px;
                        margin-right: 12px;
                        border-radius: 8px;
                        overflow: hidden;
                        background-color: #f8f8f8;
                        img {
                            width: 80px;
                            height: 80px;
                            object-fit: cover;
                        }
                    }
                    .project-item-detail {
                        flex: 1;
                        li {
                            width: 100%;
                            margin-bottom: 10px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 12px;
                            color: #969C9E;
                            &:nth-child(3),
                            &:nth-child(4) {
                                margin-bottom: 16px;
                            }
                            &:nth-child(5) {
                                margin-bottom: 0;
                            }
                            .project-name {
                                width: 250px;
                                line-height: 24px;
                                font-size: 16px;
                                color: #344047;
                                overflow : hidden;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                            }
                            .project-price {
                                width: 100%;
                                text-align: right;
                                span {
                                    position: relative;
                                    top: 1px;
                                    margin-right: 6px;
                                    color: #F58523;
                                    font-size: 16px;
                                }
                            }
                            .project-status {
                                width: 100%;
                                text-align: right;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
            .project-info-bottom {
                width: 100%;
                background-color: #fff;
                li {
                    width: 100%;
                    padding: 16px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #f2f2f2;
                    color: #5D6164;
                    .project-tag-name {
                        width: 88px;
                    }
                    .project-tag-info {
                        flex: 1;
                    }
                    .delivery-date {
                        display: flex;
                        align-items: center;
                        img {
                            position: relative;
                            top: -1px;
                            width: 16px;
                            height: 16px;
                            margin-left: 8px;
                        }
                    }
                }
                .project-pay-info {
                    font-size: 16px;
                    color: #344047;
                    border-bottom: none;
                    .project-tag-info {
                        text-align: right;
                    }
                }
            }
        }

        .resale-status-box {
            width: 100%;
            margin-bottom: 10px;
            background-color: #fff;
            .product-info {
                width: 100%;
                padding: 8px 16px;
                box-sizing: border-box;
                background-color: #31BC8D;
                color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .product-info-left {
                    span:first-child {
                        margin-right: 10px;
                    }
                }
                .product-info-right {
                    display: flex;
                    align-items: center;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-left: 6px;
                    }
                }
            }
            .project-title {
                width: 100%;
                padding: 16px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f2f2f2;
                p {
                    font-size: 16px;
                    font-weight: 500;
                    color: #344047;
                }
            }
            .resal-status-text {
                width: 100%;
                padding: 24px 16px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                span {
                    color: #344047;
                }
            }
        }

        .send-delivery-box {
            width: 100%;
            margin-bottom: 10px;
            .send-goods-box {
                margin-bottom: 10px;
                .send-goods-detail {
                    li {
                        width: 100%;
                        margin-bottom: 10px;
                        display: flex;
                        font-size: 14px;
                        span {
                            color: #5D6164;
                        }
                        span:first-child {
                            display: block;
                            width: 88px;
                        }
                    }
                    li:last-child {
                        margin-bottom: 24px;
                    }
                }
                .send-goods-tips {
                    display: flex;
                    align-items: center;
                    color: #F58523;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-left: 8px;
                    }
                }
            }
            .delivery-box {
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    height: 1px;
                    background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
                    background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
                    background-size: 115px;
                }
                .delivery-address-box {
                    width: 100%;
                    // padding-bottom: 16px;
                    // box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .address-detail {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        img {
                            width: 19px;
                            height: 25px;
                            margin-right: 16px;
                        }
                        .address-detail-text {
                            flex: 1;
                            p {
                                color: #5D6164;
                            }
                            p:first-child {
                                margin-bottom: 6px;
                                font-size: 14px;
                                span {
                                    margin-right: 16px;
                                }
                            }
                            p:last-child {
                                font-size: 12px;
                            }
                        }
                    }
                    .delivery-status {
                        width: 130px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        p {
                            flex: 1;
                            text-align: right;
                            font-size: 14px;
                        }
                        .arrow-right {
                            margin-left: 5px;
                        }
                    }
                }
                .logistics-step {
                    margin-top: 10px;
                    padding-top: 10px;
                    border-top: 1px solid #f2f2f2;
                }
            }
        }

        .order-info-detail {
            width: 100%;
            margin-bottom: 10px;
            background-color: #fff;
            .order-info-detail-title {
                width: 100%;
                padding: 16px;
                box-sizing: border-box;
                font-size: 16px;
                font-weight: 500;
                color: #344047;
                border-bottom: 1px solid #f2f2f2;
            }
            .order-info-detail-list {
                width: 100%;
                padding: 6px 16px 16px;
                box-sizing: border-box;
                li {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 10px;
                    span {
                        font-size: 14px;
                        &:first-child {
                            color: #999;
                        }
                        &:last-child {
                            color: #666;
                        }
                    }
                }
            }
        }

        .serve-agreement-box {
            width: 100%;
            margin-bottom: 28px;
            padding: 16px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            .serve-agreement-box-title {
                display: flex;
                align-items: center;
                img {
                    width: 22px;
                    height: 22px;
                    margin-right: 12px;
                }
                span {
                    font-size: 15px;
                    font-weight: 400;
                    color: #333;
                }
            }
        }

        .order-pay-box {
            width: 100%;
            background-color: #fff;
            .order-pay-title {
                width: 100%;
                padding: 16px;
                box-sizing: border-box;
                font-size: 16px;
                font-weight: 500;
                color: #344047;
                border-bottom: 1px solid #f2f2f2;
            }
            .order-pay-type {
                width: 100%;
                padding: 16px 16px 0;
                box-sizing: border-box;
                li {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .order-pay-info {
                        display: flex;
                        align-items: center;
                        img {
                            width: 32px;
                            height: 32px;
                            object-fit: cover;
                            margin-right: 16px;
                        }
                        .order-pay-info-text {
                            p {
                                color: #5D6164;
                            }
                            .balance-money {
                                color: #F58523;
                            }
                        }
                    }
                    .check-icon {
                        font-size: 20px;
                    }
                }
                li:first-child {
                    margin-bottom: 16px;
                }
            }
        }

        .buy-agreement-box {
            width: 100%;
            margin-bottom: 20px;
            padding: 24px 16px 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            background-color: #fff;
            .checked-icon {
                position: relative;
                top: -1px;
                margin-right: 8px;
                font-size: 20px;
            }
            p {
                font-size: 12px;
                color: #5D6164;
            }
        }
    }

    .bottom-info {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9;
        width: 100%;
        height: 63px;
        padding-right: 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #f2f2f2;
        .bottom-info-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: #969C9E;
            .phone-icon {
                font-size: 24px;
            }
            span {
                margin-top: 8px;
                font-size: 12px;
            }
        }
        .state-btn {
            width: 230px;
            height: 51px;
            line-height: 51px;
            font-size: 18px;
            box-shadow: none;
        }
    }

    .buy-detail-bottom {
        width: 100%;
        height: 63px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-top: 1px solid #f2f2f2;
        .buy-detail-bottom-left {
            flex: 1;
            span {
                font-size: 16px;
                font-weight: 500;
                color: #F58523;
                &:first-child {
                    margin-right: 16px;
                }
            }
        }
        .sure-btn {
            width: 144px;
            height: 51px;
            line-height: 51px;
            box-shadow: none;
        }
        .cancel-btn {
            box-shadow: none;
            border: 1px solid #31BC8D;
            color: #31BC8D;
        }
        .canceled-btn {
            box-shadow: none;
        }
        .buy-btn {
            width: 144px;
            box-shadow: none;
        }
    }

    .meat-alert-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, .4);
		.meat-alert-box {
			width: 310px;
			background-color: #fff;
			border-radius: 8px;
			overflow: hidden;
			.meat-alert-box-top {
				width: 100%;
				height: 52px;
				line-height: 52px;
				font-size: 16px;
				color: #5D6164;
				text-align: center;
				background-color: #F8F8F8;
			}
			.meat-alert-box-center {
				padding: 16px 22px;
				box-sizing: border-box;
				border-bottom: 1px solid #f2f2f2;
				p{
					&:first-child{
						color: #344047;
						font-size: 16px;
						margin-bottom: 10px;
						font-weight: 500;
					}
                    &:last-child {
                        color: #5D6164;
                    }
				}
			}
			.meat-alert-box-bottom {
				width: 100%;
				height: 48px;
				line-height: 48px;
				text-align: center;
				font-size: 16px;
			}
		}
	}

    .pay-pwd-box {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        padding: 0 26px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, .4);
        display: flex;
        flex-direction: column;
        // justify-content: center;
        // align-items: center;
        .pay-pwd-content {
            width: 100%;
            margin-top: 105px;
            padding-bottom: 14px;
            box-sizing: border-box;
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
            text-align: center;
            .pay-pwd-titel {
                position: relative;
                width: 100%;
                line-height: 48px;
                font-size: 16px;
                color: #5D6164;
                text-align: center;
                background-color: #f8f8f8;
                .close-pay-icon {
                    position: absolute;
                    top: 14px;
                    right: 23px;
                    font-size: 20px;
                    color: #31BC8D;
                }
            }
            .pay-pwd-center {
                width: 100%;
                padding: 30px 0;
                box-sizing: border-box;
            }
            .sure-pwd-btn {
                width: 138px;
                height: 44px;
                line-height: 44px;
                box-shadow: none;
            }
        }
    }
</style>